<template>
    <div>
        <div class="sky-screen ivu-mb-16">
            <row :gutter="24">
                <Col span="4">
                <Select v-model="formItem.select">
                    <Option value="全部">全部</Option>
                    <Option value="医助">医助</Option>
                    <Option value="客服">客服</Option>
                </Select>
                </Col>
                <Col span="6">
                <DatePicker :editable="false" type="daterange" placeholder="回访日期"></DatePicker>
                </Col>
            </row>
        </div>
        <div class="sky-note">
            <Tag type="border" color="primary">继续回访(5)</Tag>
            <Tag type="border" color="success">未接通/未回复(3)</Tag>
            <Tag type="border" color="warning">继续回访(2)</Tag>
        </div>
        <Timeline class="ivu-pt-16">
            <TimelineItem>
                <p class="time">2019-10-18 11:59</p>
                <p class="content">问我普查名额怎么申请 想过来看看</p>
                <p class="consultant">
                    客服
                    <span class="c-inr">王语文</span>
                    <Badge status="processing" text="继续回访" />
                </p>
            </TimelineItem>
            <TimelineItem>
                <p class="time">2019-10-16 11:59</p>
                <p class="content">平时7点下班，也没有休息天，想过段时间再看，推了全免检查到31号，手机短信发地址， 一直说谢谢，希望比较小</p>
                <p class="consultant">
                    医助
                    <span class="c-inr">王语文</span>
                    <Badge status="warning" text="未接通/未回复" />
                </p>
            </TimelineItem>
            <TimelineItem>
                <p class="time">2019-09-21 11:59</p>
                <p class="content">问我普查名额怎么申请 想过来看看</p>
                <p class="consultant">
                    客服
                    <span class="c-inr">王语文</span>
                    <Badge status="processing" text="继续回访" />
                </p>
            </TimelineItem>
        </Timeline>
        <FooterToolbar>
            <Button type="primary" class="v-mt-20" size="large" @click="handleSubmit">回访</Button>
        </FooterToolbar>
        <Modal
            class="model"
            v-model="showUpdate"
            @on-ok="handleOk"
            @on-cancel="handleCancel"
            title="回访详细"
            :mask-closable="false"
            width="80%"
        >
            <Row>
                <Col span="6" class="side-bg">
                <div class="basic">
                    <h3>颜如玉 21 女</h3>
                    <h4 class="b-phone">
                        手机号：13585687575
                        <span>诊疗号：2350265</span>
                    </h4>
                </div>
                <div class="sky-screen">
                    <row>
                        <Col span="16">
                        <DatePicker :editable="false" type="daterange" placeholder="回访日期"></DatePicker>
                            </Col>
                        <Col span="8">
                        <Select v-model="formItem.select">
                            <Option value="全部">全部</Option>
                            <Option value="医助">医助</Option>
                            <Option value="客服">客服</Option>
                        </Select>
                            </Col>
                    </row>
                </div>
                <Divider />
                <Timeline>
                    <TimelineItem>
                        <p class="time">2019-10-21 11:59</p>
                        <p class="content">告知普查名额这两天还有 想下午过来看看 2点左右 血液0元 CT 0元</p>
                        <p class="consultant">
                            客服
                            <span class="c-inr">王语文</span>
                            <Badge status="success" text="已到院" />
                        </p>
                    </TimelineItem>
                    <TimelineItem>
                        <p class="time">2019-10-18 11:59</p>
                        <p class="content">问我普查名额怎么申请 想过来看看</p>
                        <p class="consultant">
                            客服
                            <span class="c-inr">王语文</span>
                            <Badge status="processing" text="继续回访" />
                        </p>
                    </TimelineItem>
                    <TimelineItem>
                        <p class="time">2019-10-16 11:59</p>
                        <p class="content">平时7点下班，也没有休息天，想过段时间再看，推了全免检查到31号，手机短信发地址， 一直说谢谢，希望比较小</p>
                        <p class="consultant">
                            医助
                            <span class="c-inr">王语文</span>
                            <Badge status="warning" text="未接通/未回复" />
                        </p>
                    </TimelineItem>
                    <TimelineItem>
                        <p class="time">2019-09-21 11:59</p>
                        <p class="content">问我普查名额怎么申请 想过来看看</p>
                        <p class="consultant">
                            客服
                            <span class="c-inr">王语文</span>
                            <Badge status="processing" text="继续回访" />
                        </p>
                    </TimelineItem>
                </Timeline>
                </Col>
                <Col span="18">
                <div class="title">回访信息11</div>
                <Divider />
                <Form :model="formItem" :label-width="118" class="return-form">
                    <FormItem label="回访状态" required>
                        <RadioGroup v-model="formItem.radio">
                            <Radio label="未接通">未接通</Radio>
                            <Radio label="微信拉黑">微信拉黑</Radio>
                            <Radio label="继续回访">继续回访</Radio>
                            <Radio label="已到院">已到院</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="回访方式" required>
                        <RadioGroup v-model="formItem.radios">
                            <Radio label="电话">电话</Radio>
                            <Radio label="微信">微信</Radio>
                            <Radio label="QQ">QQ</Radio>
                            <Radio label="其它">其它</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="回访内容" required>
                        <Input
                            v-model="formItem.textarea"
                            type="textarea"
                            :autosize="{minRows: 2,maxRows: 5}"
                            placeholder="请输入回访内容"
                        ></Input>
                    </FormItem>
                    <FormItem label="标签">
                        <Select v-model="model7" filterable multiple>>
                            <OptionGroup label="营销">
                                <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </OptionGroup>
                            <OptionGroup label="活动">
                                <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </OptionGroup>
                        </Select>
                    </FormItem>
                    <FormItem label="营销阶段">
                        <Select v-model="formItem.select" style="width:190px">
                            <Option value="正常">正常</Option>
                            <Option value="继续回访">继续回访</Option>
                            <Option value="预约">预约</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="预约时间">
                        <DatePicker :editable="false"
                                    type="date"
                                    placeholder="请输入预约时间"
                                    v-model="formItem.date1"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="下次回访时间" required>
                        <DatePicker :editable="false"
                                    type="date"
                                    placeholder="请输入回访时间"
                                    v-model="formItem.date"
                        ></DatePicker>
                    </FormItem>
                </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                modal: false,
                loading: false,
                showUpdate: false,
                formItem: {
                    input: '',
                    select: '',
                    radio: '未接通',
                    radios: '微信',
                    checkbox: [],
                    date: '',
                    date1: '',
                    time: '',
                    textarea: ''
                },
                cityList1: [
                    {
                        value: '复诊',
                        label: '复诊'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '权威',
                        label: '权威'
                    }
                ],
                cityList2: [
                    {
                        value: '专家活动',
                        label: '专家活动'
                    },
                    {
                        value: '折扣活动',
                        label: '折扣活动'
                    },
                    {
                        value: '援助活动',
                        label: '援助活动'
                    }
                ],
                model7: ''
            };
        },
        methods: {
            handleSubmit () {
                this.showUpdate = true;
            },
            handleCancel () {
                this.showUpdate = false;
            },
            handleOk () {
                this.showUpdate = false;
                this.$Message.success('回访成功');
            }
        }
    };
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
.b-phone {
    line-height: 26px;
    font-size: 12px;
}
h4 span {
    margin-left: 5px;
}
.side-bg {
    background: #f2f2f2;
    padding: 24px !important;
}
.return-form {
    padding: 24px;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 0 0 24px;
}
.sky-screen {
    margin-top: 16px;
}
</style>
<style>
.model .ivu-modal-body {
    padding: 0px;
}
</style>
